<!DOCTYPE html>
<html>
<%@page pageEncoding="UTF-8" %>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>product</title>

		<!--导入css连接-->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />

		<link rel="stylesheet" type="text/css" href="../css/style.css" />

		<!--导入js连接-->
		<script src="../js/jquery-2.1.1.js"></script>

		<script src="../js/bootstrap.min.js"></script>

	</head>

	<body>

		<!--顶部-->
		<nav id="top" class="collapse navbar-collapse">
			<div class="container">
				<div class="row">
					<div class="col-xs-6">
						<ul class="top-link" style="float: left;">
							<li>
								<a href="index.jsp">首页</a>
							</li>
							<li>
								<a href="#">华为官网</a>
							</li>
							<li>
								<a href="#">荣耀官网</a>
							</li>
							<li>
								<a href="#">花粉俱乐部</a>
							</li>
							<li>
								<a href="goods.jsp">购物商城</a>
							</li>
							<li>
								<a href="category.jsp">更多精彩</a>
							</li>
						</ul>
					</div>
					<div class="col-xs-6">
						<ul class="top-link">
							<li>
								<a href="login.jsp">登录</a>
							</li>
							<li>
								<a href="register.jsp">注册</a>
							</li>
							<li>
								<a href="order.jsp">我的订单</a>
							</li>
							<li>
								<a href="#">客户服务</a>
							</li>
							<li>
								<a href="#">网站导航</a>
							</li>
							<li>
								<a href="cart.jsp">购物车</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</nav>

		<!--导航-->
		<nav id="menu" class="navbar">
			<div class="container">
				<div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
					<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
				</div>
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="index.jsp">荣耀商城</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">手机</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">笔记本&平板</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">智能穿戴&VR</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">智能家居&智慧屏</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">热销配件</a>
						</li>

					</ul>
				</div>
			</div>
		</nav>

		<!--模拟导航-->
		<div id="page-content" class="single-page">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<ul class="breadcrumb">
							<li>
								<a href="index.jsp">首页</a>
							</li>
							<li>
								<a href="category.jsp">手机</a>
							</li>
							<li>
								<a href="#">荣耀</a>
							</li>
						</ul>
					</div>
				</div>

				<!--到这里了-->
				<div class="row">
					<div id="main-content" class="col-md-12">
						<div class="product">
							<div class="col-md-5">
								<div class="image">
									<img src="../img/bigphone.gif" />

									<!--四张图片-->

									<div class="image-more">
										<ul class="row">
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img class="img-responsive" src="../img/minshow.png"></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img class="img-responsive" src="../img/minshow2.png"></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img class="img-responsive" src="../img/minshow3.png"></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img class="img-responsive" src="../img/minshow4.png"></a>
											</li>
										</ul>
									</div>

								</div>
							</div>

							<!--商品介绍-->
							<div class="col-md-7">
								<div class="caption">
									<div class="name">
										<h3 style="color: black;">荣耀20 4800万超广角AI四摄 3200W美颜自拍 麒麟980全网通版8GB+128GB 幻影蓝</h3></div>
									<div class="info">
										<ul>
											<li style="color: red;">【荣耀焕新潮】限时直降600元，到手价2099元，赠法国红葡萄酒兑换券！！！</li>
											<li>3200万AI自拍 | 麒麟980 定格奇幻之美</li>
										</ul>
									</div>

									<div class="price" style="font-size:16px;background-color:#F5F5F5;padding-left: 16px;padding-top: 10px;">

										<p>价 格：
											<font style="color: red;font-size: 25px;">￥2099.00</font><span>￥2699.00 </span></p>
										<p>优 惠 券:&nbsp;&nbsp;&nbsp;
											<font style="color: red;">满50减10&nbsp;&nbsp; 立即领取></font>
										</p>
										<p>促 销:
											<font style="color: red;">&nbsp;&nbsp;&nbsp;限时直降600元</font><br/>
											<font style="color: red;padding-left: 53px;">购机送葡萄酒兑换券</font> <br/>
											<font style="color: red;padding-left: 53px;">赠79元数码产品优惠券包</font> <br/>
											<font style="color: red;padding-left: 53px;">购买即赠商城积分，积分可抵现~</font>
										</p>

									</div>
									<div class="options">

										<select>
											<option value="" selected>----选择颜色----</option>
											<option value="black">幻夜黑</option>
											<option value="blue">幻影蓝</option>
											<option value="while">冰岛白</option>
											<option value="bluewater">蓝水翡翠</option>
										</select>
									</div>

									<div class="options">
										<select>
											<option value="" selected>----选择版本----</option>
											<option>全网通 8GB+12GB</option>
											<option>全网通 8GB+256GB</option>
										</select>
									</div>

									<div class="options">
										<select>
											<option value="" selected>----选择套餐----</option>
											<option>单品</option>
											<option>专业运动套餐</option>
										</select>
									</div>
									<hr />

									<!--自己写-->
									<div class="col-xs-12">
										<div style="float:left; margin-left:10px;">
											<a href="cart.html"><img src="../img/buy2.gif" style="margin-right: 10px;" /></a>
											<a href="#"><img src="../img/order.gif" /></a>
										</div>
									</div>

								</div>
							</div>
							<div class="clear"></div>
						</div>
						<hr />

						<!--超值搭配-->
						<div class="product-related">
							<div class="heading">
								<h6>超值搭配</h6>
							</div>
							<div class="products">
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product" style="color:#F00;">
										<div class="image">
											<a href="#"><img src="../img/xqshow.png" /></a>
										</div>
										<p style="margin-right:50px;">¥2099</p>
									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product" style="color:#F00;">
										<div class="image">
											<a href="#"><img src="../img/xqshow2.png" /></a>
										</div>
										<input type="checkbox" />￥49

									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product" style="color:#F00;">
										<div class="image">
											<a href="#"><img src="../img/xqshow3.png" /></a>
										</div>
										<input type="checkbox" />￥74

									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product" style="color:#F00;">
										<div class="image">
											<a href="#"><img src="../img/xqshow4.png" /></a>
										</div>
										<input type="checkbox" />￥369

									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product" style="color:#F00;">
										<div class="image">
											<a href="#"><img src="../img/xqshow5.png" /></a>
										</div>
										<input type="checkbox" />￥179

									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-xs-12">
									<div class="product">
										<div class="image">
											<a href="#"><img src="../img/xqshow6.png" /></a>
										</div>

									</div>
								</div>

							</div>
							<div class="clear"></div>

						</div>
					</div>

				</div>

				<!--详情大牌-->
				<h6>商品详情</h6>
				<hr/>
			</div>

			<img src="../img/xqshow7.jpg" />
			<img src="../img/xqshow8.jpg" />
			<img src="../img/xqshow9.jpg" />
		</div>

		<!--脚步-->
		<footer>
			<div class="container">
				<div class="wrap-footer">
					<div class="row">

						<div class="col-md-3 col-footer footer-1">
							<div class="heading">
								<h4>关于荣耀</h4></div>
							<ul>
								<li>
									<a href="#">荣耀锐影像</a>
								</li>
								<li>
									<a href="#">荣耀大事记</a>
								</li>
								<li>
									<a href="#">荣耀人物</a>
								</li>
								<li>
									<a href="#">品牌问题</a>
								</li>
								<li>
									<a href="#">新闻中心</a>
								</li>
							</ul>
						</div>
						<div class="col-md-3 col-footer footer-2">
							<div class="heading">
								<h4>产品</h4></div>
							<ul>
								<li>
									<a href="#">手机</a>
								</li>
								<li>
									<a href="#">荣耀智慧屏</a>
								</li>
								<li>
									<a href="#">笔记本&平板</a>
								</li>
								<li>
									<a href="#">穿戴设备</a>
								</li>
								<li>
									<a href="#">智能家庭</a>
								</li>
								<li>
									<a href="#">配件</a>
								</li>
							</ul>
						</div>
						<div class="col-md-3 col-footer footer-3">
							<div class="heading">
								<h4>快速链接</h4></div>
							<ul>
								<li>
									<a href="#">物料下载</a>
								</li>
								<li>
									<a href="#">移动端官网</a>
								</li>
								<li>
									<a href="#">华为商城</a>
								</li>
								<li>
									<a href="#">华为开发者联盟</a>
								</li>
								<li>
									<a href="#">华为云</a>
								</li>
							</ul>
						</div>

						<div class="col-md-3 col-footer footer-4">
							<div class="heading">
								<h4>联系我们</h4></div>
							<ul>
								<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
								<li><span class="glyphicon glyphicon-earphone"></span>950800</li>
								<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="copyright">
				<div class="container">
					<div class="row">

						<span>华为集团  &nbsp;|&nbsp;华为CBG官网&nbsp;|&nbsp;荣耀官网&nbsp;|&nbsp;花粉俱乐部&nbsp;|&nbsp;华为应用市场</span><br />
						<span>隐私声明 服务协议 COOKIES Copyright © 2012-2019 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号
增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</span>

					</div>

				</div>
			</div>
		</footer>

	</body>

</html>